{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/multilevel-menu/bootstrap-submenu/bootstrap-submenu.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('bundles/applicationbootstrap/js/multilevel-menu/bootstrap-submenu/bootstrap-submenu.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
	    $(document).ready(function() {
	        $('.dropdown-submenu > a').submenupicker();
	    });
    </script>
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>Bootstrap submenu</h1>
        </div>
        	
        <h3>Navbar</h3>	
		<nav class="navbar navbar-default">
		  <div class="navbar-header">
		    <button data-target=".navbar-collapse" data-toggle="collapse" type="button" class="navbar-toggle">
		      <span class="sr-only">Toggle navigation</span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		      <span class="icon-bar"></span>
		    </button>
		
		    <a class="navbar-brand">Project Name</a>
		  </div>
		
		  <div class="collapse navbar-collapse">
		    <ul class="nav navbar-nav">
		      <li class="dropdown">
		        <a data-toggle="dropdown" tabindex="0">Dropdown<span class="caret"></span></a>
		
		        <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		        <ul role="menu" class="dropdown-menu">
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Action</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li class="dropdown-submenu">
		                <a data-toggle="dropdown" tabindex="0">Another sub action</a>
		
		                <ul class="dropdown-menu">
		                  <li><a tabindex="0">Sub action</a></li>
		                  <li><a tabindex="0">Another sub action</a></li>
		                  <li><a tabindex="0">Something else here</a></li>
		                </ul>
		              </li>
		              <li><a tabindex="0">Something else here</a></li>
		              <li class="dropdown-submenu">
		                <a data-toggle="dropdown" tabindex="0">Another action</a>
		
		                <ul class="dropdown-menu">
		                  <li><a tabindex="0">Sub action</a></li>
		                  <li><a tabindex="0">Another sub action</a></li>
		                  <li><a tabindex="0">Something else here</a></li>
		                </ul>
		              </li>
		            </ul>
		          </li>
		
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Another action</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li><a tabindex="0">Another sub action</a></li>
		              <li><a tabindex="0">Something else here</a></li>
		            </ul>
		          </li>
		          <li><a tabindex="0">Something else here</a></li>
		          <li class="divider"></li>
		          <li><a tabindex="0">Separated link</a></li>
		        </ul>
		      </li>
		      <li class="dropdown">
		        <a data-toggle="dropdown" tabindex="0">Dropdown 2<span class="caret"></span></a>
		
		        <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		        <ul role="menu" class="dropdown-menu">
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Action</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li class="dropdown-submenu">
		                <a data-toggle="dropdown" tabindex="0">Another sub action</a>
		
		                <ul class="dropdown-menu">
		                  <li><a tabindex="0">Sub action</a></li>
		                  <li><a tabindex="0">Another sub action</a></li>
		                  <li><a tabindex="0">Something else here</a></li>
		                </ul>
		              </li>
		              <li><a tabindex="0">Something else here</a></li>
		            </ul>
		          </li>
		          <li><a tabindex="0">Another action</a></li>
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Something else here</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li><a tabindex="0">Another sub action</a></li>
		              <li><a tabindex="0">Something else here</a></li>
		            </ul>
		          </li>
		          <li class="divider"></li>
		          <li><a tabindex="0">Separated link</a></li>
		        </ul>
		      </li>
		    </ul>
		
		    <ul class="nav navbar-nav navbar-right">
		      <li class="dropdown">
		        <a data-toggle="dropdown" tabindex="0">Dropdown 3<span class="caret"></span></a>
		
		        <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		        <ul role="menu" class="dropdown-menu">
		          <li><a tabindex="0">Action</a></li>
		          <li><a tabindex="0">Another action</a></li>
		          <li><a tabindex="0">Something else here</a></li>
		          <li class="divider"></li>
		          <li><a tabindex="0">Separated link</a></li>
		        </ul>
		      </li>
		    </ul>
		  </div>
		</nav>

		<h3>Pills</h3>
		<ul class="nav nav-pills">
		  <li class="active"><a tabindex="0">Regular link</a></li>
		  <li class="dropdown">
		    <a data-toggle="dropdown" tabindex="0">Dropdown<span class="caret"></span></a>
		
		    <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		    <ul role="menu" class="dropdown-menu">
		      <li class="dropdown-submenu">
		        <a data-toggle="dropdown" tabindex="0">Action</a>
		
		        <ul class="dropdown-menu">
		          <li><a tabindex="0">Sub action</a></li>
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Another sub action</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li><a tabindex="0">Another sub action</a></li>
		              <li><a tabindex="0">Something else here</a></li>
		            </ul>
		          </li>
		          <li><a tabindex="0">Something else here</a></li>
		        </ul>
		      </li>
		      <li class="dropdown-submenu">
		        <a data-toggle="dropdown" tabindex="0">Another action</a>
		
		        <ul class="dropdown-menu">
		          <li><a tabindex="0">Sub action</a></li>
		          <li><a tabindex="0">Another sub action</a></li>
		          <li><a tabindex="0">Something else here</a></li>
		        </ul>
		      </li>
		      <li><a tabindex="0">Something else here</a></li>
		      <li class="divider"></li>
		      <li><a tabindex="0">Separated link</a></li>
		    </ul>
		  </li>
		  <li class="dropdown">
		    <a data-toggle="dropdown" tabindex="0">Dropdown 2<span class="caret"></span></a>
		
		    <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		    <ul role="menu" class="dropdown-menu">
		      <li class="dropdown-submenu">
		        <a data-toggle="dropdown" tabindex="0">Action</a>
		
		        <ul class="dropdown-menu">
		          <li><a tabindex="0">Sub action</a></li>
		          <li class="dropdown-submenu">
		            <a data-toggle="dropdown" tabindex="0">Another sub action</a>
		
		            <ul class="dropdown-menu">
		              <li><a tabindex="0">Sub action</a></li>
		              <li><a tabindex="0">Another sub action</a></li>
		              <li><a tabindex="0">Something else here</a></li>
		            </ul>
		          </li>
		          <li><a tabindex="0">Something else here</a></li>
		        </ul>
		      </li>
		      <li><a tabindex="0">Another action</a></li>
		      <li class="dropdown-submenu">
		        <a data-toggle="dropdown" tabindex="0">Something else here</a>
		
		        <ul class="dropdown-menu">
		          <li><a tabindex="0">Sub action</a></li>
		          <li><a tabindex="0">Another sub action</a></li>
		          <li><a tabindex="0">Something else here</a></li>
		        </ul>
		      </li>
		      <li class="divider"></li>
		      <li><a tabindex="0">Separated link</a></li>
		    </ul>
		  </li>
		  <li class="dropdown">
		    <a data-toggle="dropdown" tabindex="0">Dropdown 3<span class="caret"></span></a>
		
		    <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
		    <ul role="menu" class="dropdown-menu">
		      <li><a tabindex="0">Action</a></li>
		      <li><a tabindex="0">Another action</a></li>
		      <li><a tabindex="0">Something else here</a></li>
		      <li class="divider"></li>
		      <li><a tabindex="0">Separated link</a></li>
		    </ul>
		  </li>
		</ul>
		<h3>Dropdown</h3>
		<h4>With button</h4>
		<div class="dropdown m-b">
		    <button data-toggle="dropdown" type="button" class="btn btn-default">
			    Dropdown
			    <span class="caret"></span>
		    </button>
		
		    <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
			<ul role="menu" class="dropdown-menu">
			    <li><a tabindex="0">Action</a></li>
				<li class="dropdown-submenu">
				  <a data-toggle="dropdown" tabindex="0">Another action</a>
				  <ul class="dropdown-menu">
				    <li class="dropdown-header">Dropdown header</li>
				    <li><a tabindex="0">Sub action</a></li>
				    <li class="disabled"><a tabindex="0">Another sub action</a></li>
				    <li><a tabindex="0">Something else here</a></li>
				  </ul>
				</li>
				<li><a tabindex="0">Something else here</a></li>
				<li class="divider"></li>
				<li><a tabindex="0">Separated link</a></li>
			</ul>
		</div>
		
		<h4>With button-group</h4>
		<div class="btn-group">
			<button type="button" class="btn btn-default">Dropdown</button>
			<button data-toggle="dropdown" type="button" class="btn btn-default dropdown-toggle">
			    <span class="caret"></span>
			</button>
		
			<!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
			<ul role="menu" class="dropdown-menu">
			  <li><a tabindex="0">Action</a></li>
			  <li class="dropdown-submenu">
			    <a data-toggle="dropdown" tabindex="0">Another action</a>
			    <ul class="dropdown-menu">
			      <li class="dropdown-header">Dropdown header</li>
			      <li><a tabindex="0">Sub action</a></li>
			      <li class="disabled"><a tabindex="0">Another sub action</a></li>
			      <li><a tabindex="0">Something else here</a></li>
			    </ul>
			  </li>
			  <li><a tabindex="0">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a tabindex="0">Separated link</a></li>
			</ul>
		</div>
		
		<h4>With button (right align)</h4>
		<div class="dropdown m-b">
		    <button data-toggle="dropdown" type="button" class="btn btn-default">
		      Dropdown
		      <span class="caret"></span>
		    </button>
		
		    <!-- role="menu": fix moved by arrows (Bootstrap dropdown) -->
			<ul role="menu" class="dropdown-menu dropdown-menu-right">
			  <li><a tabindex="0">Action</a></li>
			  <li class="dropdown-submenu">
			    <a data-toggle="dropdown" tabindex="0">Another action</a>
			    <ul class="dropdown-menu">
			    <li class="dropdown-header">Dropdown header</li>
			      <li><a tabindex="0">Sub action</a></li>
			      <li class="disabled"><a tabindex="0">Another sub action</a></li>
			      <li><a tabindex="0">Something else here</a></li>
			    </ul>
			  </li>
			  <li><a tabindex="0">Something else here</a></li>
			  <li class="divider"></li>
			  <li><a tabindex="0">Separated link</a></li>
			</ul>
		</div>
		<hr/>
    </div> <!-- /container -->
{% endblock %}